<template>
  <view class="brandView">
    <view class="brandView-title">{{ mission.title }}</view>
    <view class="brandView-text">{{ mission.text }}</view>
    <el-row class="elRow" justify="center" gutter="20">
      <el-col
        :xs="24"
        :sm="12"
        :md="12"
        :lg="8"
        class="elCol"
        v-for="(item, index) in mission.list"
        :key="index"
      >
        <el-card class="brandView-list" :shadow="false">
          <view class="iconView">
            <u-icon
              :customPrefix="item.icon"
              color="rgb(183,146,45)"
              size="18px"
            ></u-icon>
          </view>
          <view class="brandView-list-title">{{ item.title }}</view>
          <view class="brandView-list-text">{{ item.text }}</view>
        </el-card>
      </el-col>
    </el-row>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { CircleCheck } from "@element-plus/icons-vue";

const mission = ref({
  title: "我们的价值观",
  text: "这些核心价值观指导着我们的一切行为和决策",
  list: [
    {
      icon: "custom-icon custom-icon-pinzhi1",
      title: "卓越品质",
      text: "我们坚持使用最优质的原材料，结合精湛的工艺，确保每一件产品都达到最高的品质标准。从设计到生产，我们关注每一个细节，为客户提供经久耐用的地毯产品。",
    },
    {
      icon: "custom-icon custom-icon-chuangxinsheji",
      title: "创新设计",
      text: "我们鼓励创新思维，不断探索新的设计理念和技术。我们的设计师团队来自世界各地，融合不同的文化背景和艺术风格，创造出兼具艺术性和实用性的地毯作品。",
    },
    {
      icon: "custom-icon custom-icon-kehuzhishang",
      title: "客户至上",
      text: "我们始终将客户的需求放在首位，提供个性化的定制服务和专业的咨询支持。从选购到安装，我们的团队将全程为您提供贴心的服务，确保您的满意度。",
    },
    {
      icon: "custom-icon custom-icon-shifouguchashan",
      title: "社会责任",
      text: "我们关注环保和可持续发展，采用环保材料和工艺，减少对环境的影响。同时，我们积极参与社会公益活动，回馈社会，推动行业的健康发展。",
    },
    {
      icon: "custom-icon custom-icon-streamOfPeople",
      title: "团队合作",
      text: "我们相信团队的力量大于个人，鼓励员工之间的沟通与协作。我们提供良好的工作环境和发展机会，吸引和留住优秀人才，共同推动公司的发展。",
    },
    {
      icon: "custom-icon custom-icon-wenhuachuancheng",
      title: "文化传承",
      text: "我们尊重传统工艺和文化，致力于将百年的地毯制作技艺传承下去。我们培养年轻的工艺人才，让传统技艺在现代社会中焕发新的活力。",
    },
  ],
});
</script>

<style scoped lang="scss">
.brandView {
  width: 100%;
  height: auto;
  color: #4b5563;

  &-title {
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
  }
  &-text {
    font-size: 16px;
    line-height: 30px;
    text-align: justify;
    margin-bottom: 30px;
    text-align: center;
  }

  &-list {
    width: 100%;
    height: auto;
    background-color: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    line-height: 1.5;
    border-radius: 10px;
    color: #4b5563;

    :deep(.el-card__body) {
      background-color: rgb(249, 250, 251);
      box-shadow: none;
    }

    .iconView {
      width: 60px;
      height: 60px;
      border-radius: 100%;
      background-color: rgb(183 146 45 / 0.1);
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
    }

    &-title {
      font-size: 24px;
      font-weight: 700;
      color: #4b5563;
      margin-bottom: 4px;
    }
    &-text {
      font-size: 14px;
      line-height: 26px;
      text-align: justify;
      margin-bottom: 20px;
    }
  }

  .elRow {
    width: 100%;
    margin: 0 auto !important;

    .elCol {
      margin-bottom: 20px;
    }
  }
}
@media screen and (max-width: 768px) {
  .brandView {
    .elCol {
      padding: 0 !important;
    }
  }
}
</style>
